<template>
	<el-row ref="main">
		<NavHeader ref="NavHeaderRef" @toPuth="toPuth"></NavHeader>
		<router-view></router-view>
		<NavFooter ref="footer"></NavFooter>
	</el-row>
</template>

<script>
	import NavHeader from '@/components/Header/FrontDesk/index.vue'
	import NavFooter from '@/components/Footer/Footer.vue'
	export default {
		components: {
			NavHeader,
			NavFooter
		},
		data() {
			return {
				top: 0,
			}
		},
		watch: {
			$route(to, from) {
				this.NavRef()
				setTimeout(_ => {
					this.top = this.$refs.footer.$el.getBoundingClientRect().top
				}, 100)
			},
			top(nv, lv) {
				this.handleScrollx()
			}
		},
		mounted() {
			this.top = this.$refs.footer.$el.getBoundingClientRect().top
		},
		methods: {
			handleScrollx() { //底部样式调节
				// 获取 页面节点 底部节点 
				var main = this.$refs.main.$el
				var footer = this.$refs.footer.$el
				if (this.top < 630) { //判断当前 底部节点高度
					main.classList.add('b')
					footer.classList.add('bottom')
				} else {
					if (main.classList.contains('b')) {
						main.classList.remove('b')
					}
				}
			},
			NavRef() {
				this.$refs.NavHeaderRef.GetRouteName()
			},

			toPuth(res) {
				this.$router.push(res)
			}
		}
	}
</script>

<style scoped lang="scss">
	.b {
		height: 100vh;
		.bottom {
			width: 100vw;
			position: absolute;
			bottom: 0px;
		}
	}
</style>
